<template>
  <div class="jq-table h-full flex-col">
    <div class="page-card px0 h16 pt0 pb4" v-if="isTopHeader">
      <div class="flex w-full justify-between jq-tb-btu">
        <div class="!<sm:hidden">{{ tableName }}</div>
        <TableButtons :tableButtons="tableButtons" />
      </div>
    </div>
    <el-table row-key="id" :data="data" @selection-change="handleSelectionChange" fit class="elTableScoped">
      <el-table-column type="selection" v-if="isSelect" fixed="left" />
      <template 
        :key="item.index"
        v-for="item in tableColumn">
        <!-- <el-table-column
          v-if="item.prop === 'statusText'" 
          show-overflow-tooltip
          :min-width="item.minWidth || null"
          :prop="item.prop"
          :label="item.label"
          fit="true"
          show-header="true"
          align="left"
        >  
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span :class="scope.row.status === 1 ? 'point1':'point2'"></span>
            <span>{{ scope.row[item.prop] }}</span>
          </div>
        </template>
        </el-table-column> -->
        <el-table-column
          v-if="!item.slot"
          show-overflow-tooltip
          :min-width="item.minWidth || null"
          :prop="item.prop"
          :width="item.width||''"
          :label="item.label"
          fit="true"
          show-header="true"
          align="left"
        />
        <!-- <el-table-column 
          v-else
          show-overflow-tooltip
          :min-width="item.minWidth || null"
          :prop="item.prop"
          :label="item.label"
          fit="true"
          show-header="true"
          align="left"
        /> -->
        <slot v-else :name="item.prop" />
      </template>
      
      <el-table-column v-if="itemsButtons.length" fixed="right" label="操作" width="160" align="left">
        <template #default="scope">
          <template :key="button.id" v-for="(button, index) in itemsButtons">
            <el-button
              v-if="
                button.label && ((itemsButtons.length > 3 && index < 2) || itemsButtons.length < 4) && (button.showTypeList?button.showTypeList.includes(scope.row.status):true)
              "
              type="primary"
              text
              size="small"
              v-permission="button.perms"
              @click="button.onClick(scope.row)"
              >{{ button.label }}
            </el-button>
            <el-button
              v-if="
                !button.label && ((itemsButtons.length > 3 && index < 2) || itemsButtons.length < 4)
              "
              type="primary"
              text
              size="small"
              v-permission="button.perms"
              @click="button.onClick(scope.row, button.statusConfig)"
            >
              {{ buttonsLabel(scope.row, button.statusConfig) }}</el-button
            >
          </template>
          <el-popover
            placement="bottom"
            :width="100"
            trigger="click"
            v-if="itemsButtons.length > 3"
          >
            <template #reference>
              <!-- v-if="itemsButtons.length > 1" -->
              <el-button link type="primary" size="small">更多</el-button>
            </template>
            <div class="TableBtn">
              <template :key="button.id" v-for="(button, index) in itemsButtons">
                <el-switch
                  v-if="button.eName === 'stop' && itemsButtons.length > 3 && index > 2"
                  :disabled="scope.row.orgCount != 0 || scope.row.statusText == '启用'"
                  v-model="scope.row.statusText"
                  active-value="启用"
                  inactive-value="停用"
                  v-permission="button.perms"
                  width="60"
                  inline-prompt
                  active-text="启用"
                  inactive-text="停用"
                  size="small"
                  @click="button.onClick(scope.row)"
                />
                <el-switch
                  v-if="button.eName === 'stop2'"
                  v-model="scope.row.statusText"
                  active-value="在职启用"
                  inactive-value="在职停用"
                  width="60"
                  inline-prompt
                  v-permission="button.perms"
                  active-text="在职启用"
                  inactive-text="在职停用"
                  size="small"
                  @click="button.onClick(scope.row)"
                />
                <el-switch
                  v-if="button.eName === 'stop3'"
                  v-model="scope.row.statusText"
                  active-value="启用"
                  inactive-value="停用"
                  v-permission="button.perms"
                  width="60"
                  inline-prompt
                  active-text="启用"
                  inactive-text="停用"
                  size="small"
                  @click="button.onClick(scope.row)"
                />
                <el-button
                  type="primary"
                  text
                  size="small"
                  v-if="
                    !button.hideConfig?.includes(scope.row.status) &&
                    button.eName === 'pause' &&
                    itemsButtons.length > 3 &&
                    index > 1
                  "
                  v-permission="button.perms"
                  @click="button.onClick(scope.row, button.statusConfig)"
                  >{{ buttonsLabel(scope.row, button.statusConfig) }}</el-button
                >
                <el-button
                  v-if="
                    button.eName !== 'stop' &&
                    button.eName !== 'pause' &&
                    button.label !== '查看' &&
                    itemsButtons.length > 3 &&
                    index > 1
                  "
                  v-permission="button.perms"
                  type="primary"
                  text
                  size="small"
                  @click="button.onClick(scope.row)"
                  >{{ button.label }}</el-button
                >
              </template>
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-if="showPagination"
      :pageable="page"
      :handleSizeChange="handleSizeChange"
      :handleCurrentChange="handleCurrentChange"
    />
    <AddOrUpdate ref="addOrUpdateRef" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';
import { useTable } from '@/hooks/useTable';
import { userList } from '@/api/user';

import type { IUserItem } from '@/api/user/type';
import { TableButtons } from './components';
const emits = defineEmits(['handleCurrentChange', 'handleSizeChange', 'handleSelectionChange']);

const props = defineProps({
  tableColumn: {
    type: Array as any,
    required: true
  },
  itemsButtons: {
    type: Array as any,
    required: true
  },
  tableButtons: {
    type: Array as any,
    required: true
  },
  data: {
    type: Array as any,
    required: true
  },
  page: {
    type: Object,
    required: true
  },
  isSelect: {
    type: Boolean,
    required: true
  },
  isTopHeader: {
    type: Boolean,
    default: true
  },
  showPagination: {
    type: Boolean,
    default: true
  },
  tableName:{
    type:String,
    default: '数据列表'
  }
});
const addOrUpdateRef = ref();


const buttonsType = computed(() => {
  return (row: { status: number }) => {
    if (row.status === 1) {
      return 'success';
    } else if (row.status === 2) {
      return 'danger';
    } else if (row.status === 3) {
      return 'primary';
    } else {
      return '';
    }
  };
});
const buttonsLabel = computed(() => {
  return (row: { statusConfig: {}; status: number }, statusConfig: {}) => {
    return row.status === 2 ? statusConfig[1] : statusConfig[2];
  };
});

const handleSizeChange = (value: any) => {
  emits('handleSizeChange', value);
};
const handleCurrentChange = (value: any) => {
  emits('handleCurrentChange', value);
};
/* 多选选中的数据 */
const handleSelectionChange = (val: []) => {
  // multipleSelection = val;
  emits('handleSelectionChange', val);
};
// const { tableData, page, loading, handleCurrentChange, handleSizeChange } = useTable({
//   apiFn: userList,
//   params: searchForm
// });
</script>

<style lang="scss" scoped>
.jq-table {
  .page-card {
    font-size: 15px;
    font-weight: 600;
  }
}
</style>
<style>
.TableBtn .el-button + .el-button {
  margin: 0;
}
</style>
